* {
  font-family: 'montserrat', sans-serif;
  /* sans-serif无衬线字体，是一类字体 */
  /* 如果所列出的字体都不能用，则默认的sans-serif字体能保证调用 */
}
body {
  margin: 0;
  padding: 0;
  background-color: #333;
}
.login-box {
  position: absolute;
  top: 0;
  left: 100%;
  /* 将left改为100%就可以隐藏掉原页面 */
  width: 100%;
  height: 100%;
  /* 防止抖动 */
  /* 
  vh就是当前屏幕可见高度的1%，也就是说
                    height:100vh == height:100%;
                    
    -- 但是当元素没有内容时候，设置height:100%，该元素不会被撑开，此时高度为0，
    -- 但是设置height:100vh，该元素会被撑开屏幕高度一致。
  */
  background-image: linear-gradient(45deg, #9fbaa8, #3135);
  /*  
  创建一个线性渐变，需要指定两种颜色，
  还可以实现不同方向（指定为一个角度）的渐变效果，
  如果不指定方向，默认从下到上渐变
   */
  transition: 0.8s;
}
.login-form {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  text-align: center;
}
.login-form h1 {
  font-weight: 400;
  margin-top: 0;
}
.txtb {
  display: block;
  box-sizing: border-box;
  width: 280px;
  background-color: #95a5a6;
  border: 1px solid white;
  padding: 10px 20px;
  color: white;
  outline: none;
  margin: 10px;
  border-radius: 6px;
  text-align: center;
}
.login-btn {
  width: 280px;
  background-color: #2c3e50;
  border: 0;
  color: white;
  padding: 10px;
  border-radius: 6px;
  cursor: pointer;
  /* 鼠标在该标签的上头变成一只小手 */
}
.hide-btn {
  color: #000;
  position: absolute;
  top: 40px;
  right: 40px;
  cursor: pointer;
  font-size: 36px;
}
.show-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  border: 2px solid white;
  padding: 10px;
  cursor: pointer;
  font-size: 24px;
}
.show-btn i {
  font-size: 24px;
  padding-right: 5px;
}
/* js脚本添加样式 */
.showed {
  left: 0;
}

/* icon */
@font-face {
  font-family: 'iconfont';
  src: url('//at.alicdn.com/t/font_2183091_w61pe4i45ml.eot?t=1604679079196'); /* IE9 */
  src: url('//at.alicdn.com/t/font_2183091_w61pe4i45ml.eot?t=1604679079196#iefix')
      format('embedded-opentype'),
    /* IE6-IE8 */
      url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAPIAAsAAAAAB+gAAAN7AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDHAqDKIMAATYCJAMQCwoABCAFhG0HQxvtBsiOkpwGSXL5LQNy04tAs1CxVDQTr4nSiSEJUGiDz8VfpvIdPF/d3r/dOcJE0gibJsggwBijpINjpktLwLy1zSUrKZLGo+n0wSpK+B8Ef5FdxBWxyIuBALAiRCG2kqomMGhoKwJAXAadCkzGjG6oJTAI8ooDG8QNGWZMJ68CmBv8PfEjIQxAkhXQjnVHsRZ5n//7Rmqca5wBHgKS8ZwAlMMAChAFoIE4K91qVJSOQmGt1WkpAAaDhLGWerxvdLkE6V7UDPYAZO9/HjGBqt0BQBKfoeC9P+UBCe97iKs0jbz0BjpoAMC4o4qJAPYB4cL8LIlALoEdg919PGcc2bGHIBRYvr2r19adobIVO7p5btoWBDZr7yi8Zt4Kp1fdbF0yfulMrnnxOP+mRTOSxsAWzyUrVgZ6jZSNAcoCcgdSudpWxWauuWXp1s3LARK2vd1w5dkHxP37yrt3m+7da575oLZ58eKZSwPHrxjx4EGLIKwSNJwgj+Pan9KcmCzKnwzh6p7IkwJSHTdEKDaEHYvmoo5FJdHX8I3Ucd+5KUf36QP0R/Y5uf+cbuZk582PH286kPAOvNL5yk8k8APTOp36xZf/nFa2rNoTRdZlk4bf9fA5dZJfv052RuYjv3P7bPSIMmrDw4cbmIKSLdSG5HRlo6Irb99J3O+3vlARnvjqFjn9wIHpv0UgzJDThcfBDABcrtpJAQColbwAuM7WeSrvH26EFYGP2wZ7Zf1jFBex8OTKkq1B0HW2AdPgR0jAkj8mAY7RtgxZ6DblVOx4adm9kySAxTbgP+UBX8/H8HKQOAmMKuGB5CYcKIwuSBobBTIKSSDHyAVWb6WHK/ixohDdAUAvkzkgeNsLJE9ngeLtGpLGPgOZAN9AzjsUsJTxO6FCtxjYQqugsgtaXj2cN2ikdpHY7GxY2yDoHCaVNS0LyErBajPE+PiYuHyuVGgXrGPsYnPqEux2kRetUhtfwl1OMJkk3myVWgWNPUZvt5szYmPFqneK0UhtYBWyEqjYCbR4asPxDDQk7URvvh1b+P0GAh0HExVrQ1eLX0lgZWNYOS9ejDgAslTdDuq6lsfYOOkksLMT8URWkja8Es4pMOG0hGeuXq+VQMMuhr5H0ixDrDBNhKpj5te2PUCR0gc6GR2SoAiakEG+C+06k0Ou0avwWpKbTXLYHFI8AAA=')
      format('woff2'),
    url('//at.alicdn.com/t/font_2183091_w61pe4i45ml.woff?t=1604679079196')
      format('woff'),
    url('//at.alicdn.com/t/font_2183091_w61pe4i45ml.ttf?t=1604679079196')
      format('truetype'),
    /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
      url('//at.alicdn.com/t/font_2183091_w61pe4i45ml.svg?t=1604679079196#iconfont')
      format('svg'); /* iOS 4.1- */
}

.iconfont {
  font-family: 'iconfont' !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-denglu:before {
  content: '\e653';
}

.icon-chahao:before {
  content: '\e614';
}

.icon-sousuo1:before {
  content: '\e628';
}
